<template>
  <div class="box">
        <el-container>
      <el-header>    
      </el-header>
      <el-main>
    <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    status-icon
    class="demo-ruleForm"
  >
    <el-form-item label="区域名" >
      <el-input v-model="ruleForm.region" />
    </el-form-item>
    <el-form-item label="地址" >
      <el-input
        v-model="ruleForm.address"
      />
    </el-form-item>
    <el-form-item label="描述" >
      <el-input 
      v-model="ruleForm.desc"
       :rows="3"
       type="textarea" 
      />
    </el-form-item>
    <el-form-item>
    
 
    </el-form-item>
  </el-form>
    </el-main>
    </el-container> 
     <el-button type="primary" @click="submitForm(ruleFormRef)"
        >Submit</el-button
      >
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'

const ruleFormRef = ref<FormInstance>()

const ruleForm = reactive({
  region: '',
  address: '',
  desc: '',
})
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}

</script>
<style scoped>

.el-main{
  margin:30px 220px;
  height:380px;
}
.box{
   border:2px solid #2d302f;
   height: 600px;
   width: 1200px;
   margin: 80px 185px;
    }
.el-button {
    margin-left: 880px;
    height: 45px;
}
.el-form-item {
  margin-bottom: 50px;
}
</style>